<!-- 新增/编辑 组织机构 -->
<template>
  <a-modal v-model:visible="visible" title="账单计划" unmount-on-close width="65vw">
    <a-table class="billTable" :columns="billTabColumns" :data="billPlanData" :bordered="{ cell: true }" :pagination="false">
      <template #receivableAmount="{ record }">
        {{ record.receivableAmount || '-' }}
      </template>
      <template #receivedAmount="{ record }">
        {{ record.receivedAmount || '-' }}
      </template>
      <template #orderRemark="{ record }">
        <a-typography-paragraph
          :ellipsis="{
            rows: 3,
            showTooltip: true,
          }"
        >
          {{ record?.orderRemark }}
        </a-typography-paragraph>
      </template>
    </a-table>
    <template #footer>
      <a-space>
        <a-button @click="onCancel">关闭</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref } from 'vue'
  const visible = ref(false)

  const props = defineProps({
    okLoading: Boolean,
    isList: {
      type: Boolean,
      default: true,
    },
  })

  const billPlanData = ref([])
  const billPlanId = ref('')
  const billTableData = ref([])
  const billTabColumns = [
    {
      title: '期数',
      dataIndex: 'receivableNum',
      width: 70,
    },
    {
      title: '应收款日',
      dataIndex: 'receivableTime',
      width: 140,
    },
    {
      title: '每期应收金额',
      dataIndex: 'receivableAmount',
      slotName: 'receivableAmount',
      width: 100,
    },
    {
      title: '每期实收金额',
      dataIndex: 'receivedAmount',
      slotName: 'receivedAmount',
      width: 100,
    },
    {
      title: '费用状态',
      dataIndex: 'receivableStatusName',
    },
    {
      title: '完成付款时间',
      dataIndex: 'receivedTime',
      width: 180,
    },
    {
      title: '备注',
      dataIndex: 'orderRemark',
      slotName: 'orderRemark',
    },
  ]

  const orderInfo = ref({})
  const open = (record) => {
    orderInfo.value = record
    console.log(record, 'record')
    visible.value = true
    billPlanId.value = record.id
    billPlanData.value = record.billData.list
    if (props.isList) {
      billTableData.value = record.billData && record.billData[0].list
    }
  }
  const okLoading = ref(false)
  const onCancel = () => {
    okLoading.value = false
    visible.value = false
  }

  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .page-form {
    min-height: 300px;
    overflow-x: hidden;
  }
  .billTable {
    margin-bottom: 50px;
  }
  .fee-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
  }
</style>
